<template>
  <div
    calss="tagDiv"
    style="background-color: #e9eef3; box-shadow: 0 5px 10px #cad4d3"
  >
    <el-tag
      calss="el-tag"
      v-for="tag in getTags"
      :key="tag.path"
      :effect="$route.name === tag.name ? 'dark' : 'plain'"
      @click="ChangeMenu(tag)"
      :closable="tag.name !== 'index'"
      @close="handleClose(tag,getTags)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "MenuTag",
  methods: {
    ChangeMenu(tag) {
      this.$router.push(tag.path);
      //console.log("$route.name=",this.$route.name, "@tag.name=",tag.name)
    },
    handleClose(tag,getTags) {
      if (tag.name === "index") return;
      this.getTags.splice(this.getTags.indexOf(tag), 1);
      if(tag.name===this.$route.name){
        this.$router.push({path: getTags[getTags.length-1].path})
      }
    },
  },
  computed: {
    getTags() {
      return this.$store.state.tab.tabList;
    },
  },
};
</script>

<style lang="less" scoped>
.el-tag {
  cursor: pointer;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-left: 10px;
}
</style>